<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>部门管理</title>
  </head>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <style>
    tr {
        text-align: center;
        border: 1px solid;
    }

    td{
        text-align: center;
        align-self: center;
        align-items: center;
        align-content: center;
        border: 1px solid;
        padding: 0px;
        margin: 0px;
    }

    .btn {
        margin: 5px;
    }

  </style>
  <body>
    <div id="app">
      <div style="display: flex; flex-direction: row;">
        <div style="flex-grow: 1"></div>
        <div style="display:flex ; flex-direction: column; flex-grow: 0; width: 90%;">
          <div class="tableTitle" style="text-align: center;">部门表</div>

          <table style="border: 1px solid;">
            <thead>
              <tr>
                <th>#</th>
                <th>部门编号</th>
                <th>部门名称</th>
                <th>操作</th>
              </tr>
            </thead>

            <tbody>
                <tr v-for = "(dep ,index ) in deps" :key="dep.id" >
                    <td > {{index}}</td>
                    <td>{{dep.id}}</td>
                    <td>{{dep.name}}</td>
                    <td >
                        <button class="btn">编辑</button>
                        <button class="btn">删除</button>
                    </td>
                </tr>
            </tbody>
          </table>
          <div v-if="deps == undefined ||  deps.length == 0">没有部门信息</div>

          
        </div>
        <div style="flex-grow: 1"></div>
      </div>
    </div>
  </body>

  <script>
    const { createApp } = Vue;

    createApp({
        data() {
            return {
                name:"helo",
                deps:
                [{id:"1001",name:"dep1"},
                {id:"1002",name:"dep2"},]
            }
        },

        methods: {
            handleLogin() {
                depss=[]
                
                // Implement login logic here
                console.log("Logging in with", this.username, this.password);

                
                // For example, send a request to your server
            }
        }
    }).mount('#app');
</script>


</html>
